<template>
	<view class="content">
		<view class="status_bar"></view>
		<Head :webtext="webtext"></Head>
		<view class="body">
			<view class="infor-title">
				<ul class="title-left">
					<li>
						货币：
						<span>{{ userList.member_info.money }}</span>
					</li>
					<li>
						期数：
						<span>{{ userList.stage_data.stage_next }}</span>
						期
					</li>
					<li>
						本期截止时间：
						<u-count-down class="countDown" :show-hours="false" :timestamp="countDown" separator-color="#fff"></u-count-down>
					</li>
				</ul>
				<view class="title-right">
					<li @click="navto(url)">交易记录&gt;</li>
					<!-- 					<li>
						今日交易量：
						<span>{{ userList.userdata_today.betting_today }}</span>
						期
					</li> -->
					<li>
						今日盈亏：
						<span>{{ userList.userdata_today.profit }}</span>
					</li>
				</view>
			</view>
			<view class="downList">
				<ul class="listFirst">
					<li @click="show = !show">
						<view class="">期数{{ userList.stage_data.stage }}</view>
						<view class="">{{ userList.stage_data.number.join('+') }}={{ userList.stage_data.number_sum }}</view>
						<view class="">{{ userList.stage_data.detail_cn }}</view>
					</li>
				</ul>
				<ul v-show="show" class="listOpen">
					<li v-for="(item, index) in userList.number_history" :key="item.stage_next">
						<view class="">期数{{ item.stage }}</view>
						<view class="">{{ item.number.join('+') }}={{ item.number_sum }}</view>
						<view class="">{{ item.detail_cn }}</view>
					</li>
				</ul>
			</view>
			<view class="scorllBox">
				<view class="scroll-title">
					<view>
						<text>用户</text>
						<text>交易品类</text>
						<text>单期交易</text>
						<text>跟单</text>
					</view>
				</view>
				<view v-show="!show" class="scroll-body">
					<view v-for="(item, i) in swiperList" :key="i">
						<text>{{ item.user }}</text>
						<text>{{ item.rule }}</text>
						<text>{{ item.money }}</text>
						<text @click="documentary(item)">跟单</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="head">
					<u-tabs-swiper bg-color="#323a5d" :bold="false" font-size="30" ref="uTabs" :list="list" :is-scroll="false" :show-bar="false"></u-tabs-swiper>
				</view>
				<view class="footer-right">
					<u-row justify="space-around">
						<u-col
							v-for="(item, index) in userList.odds"
							:class="active === item.id ? 'active' : ''"
							:key="item.id"
							:span="5"
							text-align="center"
							class="btn"
							@click="changeClick(item)"
						>
							<view class="myHead">{{ item.rule }}</view>
							<view class="foot">{{ item.rate }}</view>
						</u-col>
					</u-row>
					<u-row justify="space-around">
						<u-col :span="8"><u-input v-model="inputNumber" input-align="center" :border="true" type="number" placeholder="请输入金额" /></u-col>
						<u-col :span="4"><view class="button" @click="submit">确定</view></u-col>
					</u-row>
					<u-modal v-model="showModal" ref="uModal"></u-modal>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Head from '../../components/head.vue';
export default {
	components: {
		Head
	},
	data() {
		return {
			webtext: 'DECP',
			url: '/pages/mine/betRecordList',
			list: [{ name: '常规' }],
			headStyle: {
				height: '100%'
			},
			active: '',
			inputNumber: null,
			userList: [],
			clickList: {},
			show: false,
			showModal: false,
			countDown: '',
			timer: null,
			swiperLists: ['买跌MD', '买涨MZ', '大涨DZ', '做空ZK', '做多ZD', '小涨XZ'],
			swiperList: [],
			swiperListTimer: null,
			form: {},
			mylist: [],
			timers: null,
			min: null,
			rooms: null,
			hall: null
		};
	},
	onShow() {
		let ls = this;
		clearTimeout(ls.timer);
		this.timer = null;
		this.timer = setInterval(() => {
			ls.getlist();
		}, 2000);
		for (let i = 0; i < 40; i++) {
			let roleNum = Math.round(Math.random() * 5);
			let money = `${Math.round(Math.random() * 50)}${Math.round(Math.random() * 9)}${Math.round(Math.random() * 9)}${Math.round(Math.random() * 9)}.00`;
			let userNum = `***${Math.round(Math.random() * 9)}${Math.round(Math.random() * 9)}${Math.round(Math.random() * 9)}${Math.round(Math.random() * 9)}`;
			let swiperform = {};
			swiperform.rule = ls.swiperLists[roleNum];
			swiperform.money = money;
			swiperform.user = userNum;
			ls.swiperList.push(swiperform);
		}
		// }, 100000);
	},
	onLoad(option) {
		console.log(option);
		this.min = option.id;
		this.rooms = option.rooms;
		this.hall = option.hall;
	},
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	onHide() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	methods: {
		getLists() {
			let ls = this;
			this.timer = setInterval(() => {
				ls.getlist();
			}, 1000);
		},
		navto(url) {
			uni.navigateTo({
				url: url
			});
		},
		changeClick(item) {
			this.active = item.id;
			this.clickList = item;
			console.log(item);
		},
		submit() {
			if (this.inputNumber) {
				uni.showModal({
					title: '提示',
					content: '您确定要交易嘛',
					success: res => {
						if (res.confirm) {
							if (this.inputNumber < this.min) {
								uni.showToast({
									title: `最小投资金额${this.min}元`,
									duration: 1000,
									icon: 'none'
								});
							} else {
								this.form.number = this.clickList.rule;
								this.form.type = this.clickList.type;
								this.form.money = this.inputNumber;
								this.form.z_money = this.inputNumber * this.clickList.rate;
								this.mylist.push(this.form);
								this.mylist = JSON.stringify(this.mylist);
								this.$u.api
									.getDECPListSubmit({
										cate: this.clickList.cate,
										hall: this.clickList.hall,
										stage: this.userList.stage_data.stage_next,
										list: this.mylist,
										content: this.clickList.rule + '/' + this.inputNumber
									})
									.then(res => {
										uni.showToast({
											title: res.msg,
											duration: 1000,
											icon: 'none'
										});
										(this.form = {}), (this.mylist = []);
									});
							}
						} else if (res.cancel) {
						}
					}
				});
			} else {
				uni.showToast({
					title: '请填写交易数量',
					duration: 1000,
					icon: 'none'
				});
			}
		},
		getlist() {
			this.$u.get(`http://www.zb1237.com/api/rooms/${this.rooms}/hall/${this.hall}/token/${uni.getStorageSync('Authorized')}`).then(res => {
				this.userList = res;
				// this.swiperList = this.swiperList.concat(this.userList.odds);
				this.userList.odds = this.userList.odds.slice(2, 8);
				if (this.userList.is_on == 1) {
					let ls = this.userList.next_time - new Date().getTime() / 1000;
					ls = ls.toString();
					this.countDown = ls.substring(0, ls.indexOf('.'));
				} else {
					uni.showToast({
						title: '交易结束',
						duration: 1000,
						icon: 'none'
					});
					// uni.navigateTo({
					// 	url:"/pages/index/jydt"
					// })
				}
			});
		},
		documentary(item) {
			console.log(item);
			uni.showModal({
				title: '您确定跟单吗',
				content: `您确定要投资[${item.rule}]${item.money}`,
				success: res => {
					if (res.confirm) {
						if (item.money < this.min) {
							uni.showToast({
								title: `最小投资金额${this.min}元`,
								duration: 1000,
								icon: 'none'
							});
						} else {
							let arr = this.userList.odds.filter(items => items.rule === item.rule);
							this.clickList = arr[0];
							this.form.number = item.rule;
							this.form.type = this.clickList.type;
							this.form.money = item.money;
							this.form.z_money = item.money * this.clickList.rate;
							this.mylist.push(this.form);
							this.mylist = JSON.stringify(this.mylist);
							this.$u.api
								.getDECPListSubmit({
									cate: this.clickList.cate,
									hall: this.clickList.hall,
									stage: this.userList.stage_data.stage_next,
									list: this.mylist,
									content: item.rule + '/' + item.money
								})
								.then(res => {
									uni.showToast({
										title: res.msg,
										duration: 1000,
										icon: 'none'
									});
									(this.form = {}), (this.mylist = []);
								});
						}
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.infor-title {
	width: 100%;
	background-color: #323a5d;
	display: flex;
	color: #ccc;
	margin-bottom: 20upx;
	.title-left {
		width: 50%;
		list-style: none;
		li {
			margin: 14upx 10upx 14upx 30upx;
			span {
				color: #007aff;
			}
		}
	}
	.title-right {
		width: 50%;
		list-style: none;
		li {
			margin: 14upx 30upx 14upx 10upx;
			text-align: right;
		}
	}
}
.downList {
	height: 50upx;
	margin-bottom: 10upx;
	background-color: #323a5d;
	position: relative;
	.listFirst {
		li {
			width: 100%;
			height: 50upx;
			display: flex;
			justify-content: space-around;
			line-height: 50upx;
			color: #fff;
			&::after {
				content: '';
				position: absolute;
				right: 20upx;
				top: calc(50% - 10upx);
				background: url(../../static/direct-right1.png) no-repeat center;
				width: 20upx;
				height: 20upx;
				transform: rotate(90deg);
				background-size: contain;
			}
		}
	}
	.listOpen {
		background-color: #323a5d;
		li {
			width: 100%;
			height: 50upx;
			display: flex;
			justify-content: space-around;
			line-height: 50upx;
			color: #fff;
			background-color: #323a5d;
		}
	}
}
.scorllBox {
	width: 690upx;
	height: 500upx;
	background-color: #323a5d;
	margin: 0 auto;
	border-radius: 20upx;
	overflow: hidden;
	.scroll-title {
		height: 60upx;
		padding: 0 20upx;
	}
	.scroll-title view {
		height: 60upx;
		display: flex;
	}
	.scroll-title view text {
		flex: 1;
		text-align: center;
		line-height: 60upx;
		color: #cdcdd2;
		font-size: 26upx;
	}
	.scroll-body {
		height: 500upx;
		padding: 0 20upx;
		overflow: hidden;
	}
	.scroll-body view {
		display: flex;
	}
	.scroll-body view text {
		flex: 1;
		display: block;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.scroll-body view text:nth-of-type(1) {
		color: #538cbb;
	}
	.scroll-body view text:nth-of-type(2) {
		color: #cdcdd2;
	}
	.scroll-body view text:nth-of-type(3) {
		color: #538cbb;
	}
	.scroll-body view text:nth-of-type(4) {
		color: #cdcdd2;
	}
}
.footer {
	margin-top: 34upx;
	background-color: #151936;
	display: flex;
	.head {
		width: 30%;
		height: 75upx;
	}
	.footer-right {
		background-color: #323a5d;
		width: 70%;
		color: #fff;
		.active {
			background-color: #61a3ff !important;
			border: #42b983 solid 2upx;
		}
		.btn {
			text-align: center;
			background-color: #151936;
			height: 75upx;
			line-height: 75upx;
			margin: 10upx;
			border-radius: 10upx;
			.myHead {
				height: 50%;
				line-height: 1.5;
				color: #ccc;
			}
			.foot {
				height: 50%;
				line-height: 1.5;
				color: #f0ad4e;
			}
		}
		.button {
			width: 100%;
			font-size: 34upx;
			// margin: 30upx auto;
			height: 70upx;
			line-height: 70upx;
			color: #fff;
			background: #0da3ff;
			// padding: 0 0upx;
			text-align: center;
			border-radius: 30upx;
		}
	}
}
@keyframes move {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-1350upx);
	}
}
.scroll-body view {
	animation: move 35s linear infinite;
}
/deep/ .u-input {
	width: 100%;
	font-size: 34upx;
	// margin: 30upx auto;
	height: 70upx;
	line-height: 70upx;
	border: 2upx solid #fff;
	border-radius: 30upx;
}
/deep/.uni-input-input {
	color: #fff;
}
</style>
